<template>
  <div class="container">
    <div class="signOnForm">
      <form :model="form" @submit.prevent="signon">
        <p style="font-size: 26px;">请输入账号和密码</p>
        <p style="color: indianred;font-size: 16px;position: absolute;left: 0; top: 70%; right: 0; bottom: 0;"
           v-text="loginMsg" v-if="loginMsg!==''"></p>
        <div class="loginContent">
          <div class="formItem">
            <label>账&emsp;号:</label>
            <input type="text" v-model="form.username" class="input"> <br/>
          </div>
          <div class="formItem">
            <label>密&emsp;码:</label>
            <input type="password" v-model="form.password" class="input"> <br/>
          </div>
          <div class="email">
            <label>邮&emsp;箱:</label>
            <input type="text" v-model="form.email" class="input" id="email"/><br/>
          </div>
          <div class="verify">
            <button type="button" @click="getEmailCheckCode" class="email-btn">发送验证码</button>
            <input type="text" v-model="form.checkCode" class="checkCode-input"/> <br/>
          </div>

        </div>
        <div class="buttonClass">
          <button type="submit"><span>登录</span></button>
          <router-link to="/register">
            <button type="button"><span>注册</span></button>
          </router-link>
        </div>
      </form>

    </div>
    <div id="BackLink">
      <router-link to="/mainForm">
        <button><span>返回主页面</span></button>
      </router-link>
    </div>

  </div>
</template>

<script>

import $ from 'jquery'
import axios from "axios";
import FormData from 'form-data'

export default {

  name: "signon",
  data() {
    return {
      form: {
        username: '',
        password: '',
        email: '',
        checkCode: ''
      },
      loginMsg: '',
      //初始化购物车
      //购物车
      cart:{
        "cartItems": [],
        "numberOfItems": 0,
        "subTotal": 0,
        "cartItemList": [],
        "allCartItems": []
      },
      item:{
        itemId: '',
        productId: '',
        listPrice: null,
        unitCost: null,
        supplierId: null,
        status: '',
        attribute1: '',
        attribute2: '',
        attribute3: '',
        attribute4: '',
        attribute5: '',
        productName: ''
      }
    }
  },
  // 使用inject注入App.vue提供的reload依赖
  inject: ['reload'],
  mounted() {
    this.init()
  },

  methods: {
    init(){
      axios.defaults.withCredentials = true
    },
    //获取验证码
    getEmailCheckCode() {
      axios({
        url: "http://127.0.0.1:8088/send/" + this.form.email,
        method: 'post',
      }).then(res => {
        console.log(res)
        window.confirm('验证码发送成功，请注意查收！')
      }).catch((err) => {
        console.log(err)
      });
    },

    //用户点击登录函数
    signon() {
      let data = new FormData();
      data.append('username', this.form.username);
      data.append('password', this.form.password);
      axios({
        url: "http://localhost:8088/account/login?code="+this.form.checkCode,
        method: 'post',
        headers: {
          'Content-Type ': 'multipart/form-data'
        },
        data: data
      }).then((res) => {
        console.log(res)
        //将用户登录信息存入localStorage
        localStorage.setItem("username", this.form.username)
        axios({
          url:"http://localhost:8088/account/myAccountForm/"+this.form.username,
          method: 'get',
        }).then(res=>{
          let accountStr = JSON.stringify(res.data.data)
          localStorage.setItem('account',accountStr)
        })
        //初始化购物车
        // const cartStr = JSON.stringify(this.cart)
        //生命周期是永久，除非主动清除localStorage信息，否则这些信息将一直存放在客户端
        // localStorage.setItem('cart',cartStr)
        //刷新并跳转页面至主页面
        location.href = '/mainForm'
      }).catch((err) => {
        console.log(err)
      });
    },

  },
  getEmail() {
    this.form.email = $('#email').val()
  },


}
</script>

<style scoped>
@import "../../assets/css/shop.css";

@font-face {
  font-family: 'huayuan';
  src: url('../../assets/font/花园肉丸.ttf');
}

.signOnForm {
  width: 36%;
  height: 400px;
  background-color: white;
  position: relative;
  top: 130px;
  margin: 0 auto;
  font-family: huayuan;
  font-size: 24px;
  text-align: center;
  padding-top: 50px;
  padding-bottom: 135px;
}

.input {
  width: 250px;
  height: 30px;
  line-height: 20px;
  margin: 20px;
  position: relative;
  bottom: 4px;
}

.buttonClass {
  width: 45%;
  display: flex;
  flex-direction: row;
  margin: 0 auto;
  position: absolute;
  left: 0;
  top: 80%;
  right: 0;
  bottom: 0;
}

.buttonClass button {
  width: 120px;
  height: 40px;
  border-radius: 14px;
  border: none;
  background-color: antiquewhite;
  opacity: 80%;
  font-size: 22px;
  font-family: huayuan;
  color: rgb(244, 183, 103);
  display: block;
  margin: 0 auto;
  padding: 5px;
  cursor: pointer;
}

.email-btn {
  width: 120px;
  height: 40px;
  border-radius: 14px;
  border: none;
  background-color: antiquewhite;
  opacity: 80%;
  font-size: 22px;
  font-family: huayuan;
  color: rgb(244, 183, 103);
  display: block;
  margin: 0 auto;
  padding: 5px;
  cursor: pointer;
}

.buttonClass button span {
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.buttonClass button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.buttonClass button:hover span {
  padding-right: 25px;
}

.buttonClass button:hover span:after {
  opacity: 1;
  right: 0;
}

.buttonClass a {
  color: rgb(244, 183, 103);
  display: block;
  margin: 0 auto;
}

.verify {
  display: inline-flex;
  margin-top: 15px;
}

.checkCode-input {
  margin-right: 30px;
  margin-left: 45px;
  width: 200px;
}

#BackLink {
  top: 60px;
}
</style>